<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Minishop - Free Bootstrap 4 Template by Colorlib</title>
	  <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	  <style>
		  /* 搜索框样式 */
		  .search-box {
			  width: 300px;
			  margin: 10px auto; /* 水平居中并设置上下边距 */
		  }

		  .search-box input[type="text"] {
			  width: 80%;
			  padding: 10px;
			  border: 1px solid #ccc;
			  border-radius: 4px 0 0 4px; /* 左边圆角 */
			  font-size: 16px;
			  outline: none; /* 去除输入框聚焦时的默认边框 */
		  }


		  .search-box button {

			  width: 20%;
			  padding: 10px;
			  background-color: #007bff;
			  border: none;
			  border-radius: 0 4px 4px 0; /* 右边圆角 */
			  cursor: pointer;
			  color: white;
			  font-size: 16px;
		  }

		  .search-box input {
			  float: left;
		  }

		  .search-box button {
			  float: left;
		  }

		  /* 清除浮动 */
		  .search-box::after {
			  content: "";
			  display: table;
			  clear: both;
		  }


	  </style>
    


    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/ionicons.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">

    
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body class="goto-here">
		<div class="py-1 bg-black">
    	<div class="container">
    		<div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
	    		<div class="col-lg-12 d-block">
		    		<div class="row d-flex">
		    			<div class="col-md pr-4 d-flex topper align-items-center">
					    	<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-phone2"></span></div>
						    <span class="text">+ 1235 2355 98</span>
					    </div>
					    <div class="col-md pr-4 d-flex topper align-items-center">
					    	<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-paper-plane"></span></div>
						    <span class="text">youremail@email.com</span>
					    </div>
					    <div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right">
						    <span class="text">3-5 Business days delivery &amp; Free Returns</span>
					    </div>
				    </div>
			    </div>
		    </div>
		  </div>
    </div>
		<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
			<div class="container">
				<a class="navbar-brand" href="javascript:;">"鞋梦弄潮"鞋子商城</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="oi oi-menu"></span> Menu
				</button>

				<div class="collapse navbar-collapse" id="ftco-nav">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item active"><a href="shopping/index" class="nav-link">Home</a></li>
						<li class="nav-item"><a class="nav-link" id="headUserinfobutton" href="shopping/userinfo">userinfo</a></li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="javascript:;" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cataloge</a>
							<div class="dropdown-menu" aria-labelledby="dropdown04">
								<a class="dropdown-item" href="shopping/shop">Shop</a>
								<a class="dropdown-item" id="headCartbutton" href="shopping/cart">Cart</a>
							</div>
						</li>
						<li class="nav-item"><a href="shopping/about" class="nav-link">About</a></li>
						<li class="nav-item cta cta-colored"><a href="shopping/cart" id="headCartbutton1" class="nav-link"><span class="icon-shopping_cart"></span>[0]</a></li>

					</ul>
				</div>
			</div>
		</nav>
		<!-- END nav -->



    <div class="hero-wrap hero-bread" style="background-image: url('image/bg_6.jpg');">
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-9 ftco-animate text-center">
          	<p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home</a></span> <span>Shop</span></p>
            <h1 class="mb-0 bread">Shop</h1>
          </div>
        </div>
      </div>
    </div>

		<!-- 新增搜索框 -->
		<div class="search-box">
			<input type="text" id="search-input" placeholder="请输入搜索关键字">
			<button id="search-button">搜索</button>
		</div>

    <section class="ftco-section bg-light">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-lg-10 order-md-last">
    				<div class="row" id="productNew">

		    		</div>
		    		<div class="row mt-5" id="pageBar">
		          <div class="col text-center">
		            <div class="block-27">
		              <ul>

		              </ul>
		            </div>
		          </div>
		        </div>
		    	</div>

		    	<div class="col-md-4 col-lg-2">
		    		<div class="sidebar">
							<div class="sidebar-box-2">
								<h2 class="heading">Categories</h2>
								<div class="fancy-collapse-panel">
                  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!--                     <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="headingOne">
                             <h4 class="panel-title">
                                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Men's Shoes
                                 </a>
                             </h4>
                         </div>
                         <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                             <div class="panel-body">
                                 <ul>
                                 	<li><a href="javascript:;">Sport</a></li>
                                 	<li><a href="javascript:;">Casual</a></li>
                                 	<li><a href="javascript:;">Running</a></li>
                                 	<li><a href="javascript:;">Jordan</a></li>
                                 	<li><a href="javascript:;">Soccer</a></li>
                                 	<li><a href="javascript:;">Football</a></li>
                                 	<li><a href="javascript:;">Lifestyle</a></li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                     <div cass="panel panel-default">
						 <div class="panel-heading" role="tab" id="headingTwo">
							 <h4 class="panel-title">
								 <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Women's Shoes
								 </a>
							 </h4>
						 </div>
						 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
							 <div class="panel-body">
								 <ul>
									 <li><a href="javascript:;">Sport</a></li>
									 <li><a href="javascript:;">Casual</a></li>
									 <li><a href="javascript:;">Running</a></li>
									 <li><a href="javascript:;">Jordan</a></li>
									 <li><a href="javascript:;">Soccer</a></li>
									 <li><a href="javascript:;">Football</a></li>
									 <li><a href="javascript:;">Lifestyle</a></li>
								 </ul>
							 </div>
						 </div>
					 </div>
					  <div class="panel panel-default">
						  <div class="panel-heading" role="tab" id="headingThree">
							  <h4 class="panel-title">
								  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accessories
								  </a>
							  </h4>
						  </div>
						  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
							  <div class="panel-body">
								  <ul>
									  <li><a href="javascript:;">Jeans</a></li>
									  <li><a href="javascript:;">T-Shirt</a></li>
									  <li><a href="javascript:;">Jacket</a></li>
									  <li><a href="javascript:;">Shoes</a></li>
								  </ul>
							  </div>
						  </div>
					  </div>
					  <div class="panel panel-default">-->

					<!--  //分类-->
     <!--                    <div class="panel-heading" role="tab" id="headingFour">
                             <h4 class="panel-title">
                                 <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseThree">Clothing
                                 </a>
                             </h4>
                         </div>
                         <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                             <div class="panel-body">
                                <ul>
                                 	<li><a href="javascript:;">Jeans</a></li>
                                 	<li><a href="javascript:;">T-Shirt</a></li>
                                 	<li><a href="javascript:;">Jacket</a></li>
                                 	<li><a href="javascript:;">Shoes</a></li>
                                 </ul>
                             </div>
                         </div>-->
                     					</div>
									</div>
               				</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </section>
		
		<section class="ftco-gallery">
    	<div class="container">
    		<div class="row justify-content-center">
    			<div class="col-md-8 heading-section text-center mb-4 ftco-animate">
            <h2 class="mb-4">Follow Us On Instagram</h2>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in</p>
          </div>
    		</div>
    	</div>
    	<div class="container-fluid px-0">
    		<div class="row no-gutters">
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-1.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-1.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-2.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-2.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-3.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-3.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-4.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-5.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-5.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
					<div class="col-md-4 col-lg-2 ftco-animate">
						<a href="files/gallery-6.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(image/gallery-6.jpg);">
							<div class="icon mb-4 d-flex align-items-center justify-content-center">
    						<span class="icon-instagram"></span>
    					</div>
						</a>
					</div>
        </div>
    	</div>
    </section>

    <footer class="ftco-footer ftco-section">
      <div class="container">
      	<div class="row">
      		<div class="mouse">
						<a href="javascript:;" class="mouse-icon">
							<div class="mouse-wheel"><span class="ion-ios-arrow-up"></span></div>
						</a>
					</div>
      	</div>
        <div class="row mb-5">
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Minishop</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
              <ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-twitter"></span></a></li>
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-facebook"></span></a></li>
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-instagram"></span></a></li>
              </ul>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4 ml-md-5">
              <h2 class="ftco-heading-2">Menu</h2>
              <ul class="list-unstyled">
                <li><a href="javascript:;" class="py-2 d-block">Shop</a></li>
                <li><a href="javascript:;" class="py-2 d-block">About</a></li>
                <li><a href="javascript:;" class="py-2 d-block">Journal</a></li>
                <li><a href="javascript:;" class="py-2 d-block">Contact Us</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-4">
             <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Help</h2>
              <div class="d-flex">
	              <ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
	                <li><a href="javascript:;" class="py-2 d-block">Shipping Information</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Returns &amp; Exchange</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Terms &amp; Conditions</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Privacy Policy</a></li>
	              </ul>
	              <ul class="list-unstyled">
	                <li><a href="javascript:;" class="py-2 d-block">FAQs</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Contact</a></li>
	              </ul>
	            </div>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
            	<h2 class="ftco-heading-2">Have a Questions?</h2>
            	<div class="block-23 mb-3">
	              <ul>
	                <li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
	                <li><a href="javascript:;"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
	                <li><a href="javascript:;"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
	              </ul>
	            </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center">

            <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
          </div>
        </div>
      </div>
    </footer>
    
  

  <!-- loader -->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"></circle><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"></circle></svg></div>

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery-migrate-3.0.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.easing.1.3.js"></script>
		<script src="js/jquery.waypoints.min.js"></script>
		<script src="js/jquery.stellar.min.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.magnific-popup.min.js"></script>
		<script src="js/aos.js"></script>
		<script src="js/jquery.animateNumber.min.js"></script>
		<script src="js/bootstrap-datepicker.js"></script>
		<script src="js/scrollax.min.js"></script>

		<script src="js/google-map.js"></script>
		<script src="js/main.js"></script>


		<!--分类模版-->

		<script type="text/html" id="categoryitem">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab">
					<h4 class="panel-title">
						<a aria-expanded="true" data-toggle="collapse" data-parent="#accordion"
						   ><span class="category-name" ></span>
						</a>
					</h4>
				</div>
				<div class="panel-collapse collapse show" role="tabpanel" >
					<div class="panel-body">
						<ul >
						</ul>
					</div>
				</div>
			</div>

		</script>

<!--商品模版-->
		<script type="text/html" id="productitem">
			<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
				<div class="product d-flex flex-column">
					<a href="" class="img-prod"><img class="img-fluid" src="picture/product-1.png" alt="Colorlib Template">
						<div class="overlay"></div>
					</a>
					<div class="text py-3 pb-4 px-3">
						<div class="d-flex">
							<div class="cat">
								<span>Lifestyle</span>
							</div>
							<div class="rating">
								<p class="text-right mb-0">
									<a href="javascript:;"><span class="ion-ios-star-outline"></span></a>
									<a href="javascript:;"><span class="ion-ios-star-outline"></span></a>
									<a href="javascript:;"><span class="ion-ios-star-outline"></span></a>
									<a href="javascript:;"><span class="ion-ios-star-outline"></span></a>
									<a href="javascript:;"><span class="ion-ios-star-outline"></span></a>
								</p>
							</div>
						</div>
						<h3><a href="javascript:;" name="productName">Nike Free RN 2021 iD</a></h3>
						<div class="pricing">
							<p class="price">$<span>120.00</span></p>
						</div>
						<p class="bottom-area d-flex px-3">
							<a href="javascript:;" class="add-to-cart text-center py-2 mr-1"><span>Add to cart <i class="ion-ios-add ml-1"></i></span></a>
							<a href="" class="buy-now text-center py-2">Buy now<span><i class="ion-ios-cart ml-1"></i></span></a>
						</p>
					</div>
				</div>
			</div>
		</script>

		<script src="layui/layui.all.js"></script>


		<!--  分页-->
		<script>
			// 分页相关函数
			function renderPagination(totalPages, currentPage, category_id1, category_id2, keyword) {
				const pagination = $('#pageBar ul');
				pagination.empty(); // 清空原有分页按钮

				// 上一页按钮
				if (totalPages<=0){return;}
				const prevButton = $('<li><a href="javascript:;" class="prev-page">&lt;</a></li>');
				if (currentPage === 1) {
					prevButton.addClass('disabled');
				}
				prevButton.on('click', function (e) {
					e.preventDefault();
					if (!$(this).hasClass('disabled')) {
						const newPage = currentPage - 1;
						// 构建 URL
						let url = 'shopping/shop?';
						if (category_id1) {
							url += `category_id1=${category_id1}`;
							if (category_id2) {
								url += `&category_id2=${category_id2}`;
							}
						}
						if (keyword) {
							url += `&text=${keyword}`;
						}
						url += `&page=${newPage}`;
						window.location.href = url;
					}
				});
				pagination.append(prevButton);

				// 计算起始页码和结束页码
				let startPage = Math.max(1, currentPage - 2);
				let endPage = Math.min(totalPages, startPage + 4);

				// 如果结束页码小于 5，调整起始页码
				if (endPage - startPage < 4) {
					startPage = Math.max(1, endPage - 4);
				}

				// 页码按钮

				for (let i = startPage; i <= endPage; i++) {
					const pageButton = $('<li><a href="javascript:;" class="page-number">' + i + '</a></li>');
					if (i === currentPage) {
						pageButton.addClass('active');
					}
					pageButton.on('click', function (e) {
						e.preventDefault();
						const newPage = parseInt($(this).text());
						// 构建 URL
						let url = 'shopping/shop?';
						if (category_id1) {
							url += `category_id1=${category_id1}`;
							if (category_id2) {
								url += `&category_id2=${category_id2}`;
							}
						}
						if (keyword) {
							url += `&text=${keyword}`;
						}
						url += `&page=${newPage}`;
						window.location.href = url;
					});
					pagination.append(pageButton);
				}

				// 下一页按钮
				if (totalPages<=0){return;}
				const nextButton = $('<li><a href="javascript:;" class="next-page">&gt;</a></li>');
				if (currentPage === totalPages) {
					nextButton.addClass('disabled');
				}
				nextButton.on('click', function (e) {
					e.preventDefault();
					if (!$(this).hasClass('disabled')) {
						const newPage = currentPage + 1;
						// 构建 URL
						let url = 'shopping/shop?';
						if (category_id1) {
							url += `category_id1=${category_id1}`;
							if (category_id2) {
								url += `&category_id2=${category_id2}`;
							}
						}
						if (keyword) {
							url += `&text=${keyword}`;
						}
						url += `&page=${newPage}`;
						window.location.href = url;
					}
				});
				pagination.append(nextButton);
			}

			// 监听搜索按钮的点击事件
			$('#search-button').on('click', function () {
				let keyword = $('#search-input').val();
				let category_id1 = $("[data-category_id2] a[style*=\"color: rgb(219, 204, 143);\"]").data('category_id1'); // 这里需要根据实际情况获取 category_id1
				let category_id2 = $("[data-category_id2] a[style*=\"color: rgb(219, 204, 143);\"]").data('category_id2');// 这里需要根据实际情况获取 category_id2
				let currentPage = 1; // 搜索时默认跳转到第一页
				let totalPages = 10; // 这里需要根据实际情况获取总页数

				// 构建 URL
				let url = 'shopping/shop?';
				if (category_id1) {
					url += `category_id1=${category_id1}`;
					if (category_id2) {
						url += `&category_id2=${category_id2}`;
					}
				}
				if (keyword) {
					url += `&text=${keyword}`;
				}
				url += `&page=${currentPage}`;
				window.location.href = url;

				// 重新渲染分页
				renderPagination(totalPages, currentPage, category_id1, category_id2, keyword);
			});


		</script>


		<!--获取所有分类-->
		<script th:inline="javascript">
			const $ = layui.$;
			$.ajax({
				url: 'category/list',
				success: function (result) {
					console.log(result);
					let data = result.data;
					for (let i = 0; i < data.length; i++) {
						if (data[i].level === 1) {
							let itemdata = data[i];//所有父级分类
							let itemtext = $("#categoryitem").html();
							let $item = $(itemtext);
							$item.find(".panel-heading").attr("id", "heading" + i);
							$item.find(".category-name").text(itemdata.name);
							$item.find(".panel-title a").attr("href", "#collapse" + i);
							$item.find(".panel-title a").attr("aria-controls", "collapse" + i);
							$item.find(".panel-collapse").attr("id", "collapse" + i);
							$item.find(".panel-collapse").attr("aria-labelledby", "heading" + i);
							$item.find(".panel-title a").attr("data-category_id1", itemdata.id);
							$item.find(".panel-title a").attr("data-level", 1);



							for (let j = 0; j < data.length; j++) {
								let itemdata2 = data[j];
								if (itemdata2.parent_id === itemdata.id) {
									let listItem = `<li><a href="javascript:;" data-category_id1="${itemdata.id}" data-category_id2="${itemdata2.id}" data-level="2">${itemdata2.name}</a></li>`;

									$item.find(".panel-body ul").append(listItem);


									$item.find(".panel-body ul a[data-level='2']").on('click', handleCategoryClick);
									$item.find(`.panel-body ul a[data-level='2'][data-category_id1='${category_id1}'][data-category_id2='${category_id2}']`).css('color', '#dbcc8f');
								}
							}
							$(".panel-group").append($item);
						}
					}


				}
			});


			function handleCategoryClick() {




				let level = $(this).data('level');
				let category_id1 = $(this).data('category_id1');
				let category_id2 = $(this).data('category_id2');
				let keyword = $('#search-input').val();
				let color = $(this).css('color');
				console.log(color);

				if (color==="rgb(219, 204, 143)"){

					// 构建 URL
					let arl = 'shopping/shop?';
					if (keyword) {
						arl += `&text=${keyword}`;
					}
						window.location.href = arl;
				}else if (color === "rgb(0, 0, 0)"){
					// 构建 URL
					let url = 'shopping/shop?';
					if (category_id1) {
						url += `category_id1=${category_id1}`;
						if (category_id2) {
							url += `&category_id2=${category_id2}`;
						}
					}
					if (keyword) {
						url += `&text=${keyword}`;
					}
					if (level === 2) {
						console.log('二级分类被点击，一级分类 ID:', category_id1, '二级分类 ID:', category_id2);
						window.location.href = url;
					}
				}

			}
		</script>


	<!--	获取指定商品-->
		<script th:inline="javascript">
			// 获取后端传递的参数

			var category_id1 = /*[[${product.category_id1}]]*/ null;
			var category_id2 = /*[[${product.category_id2}]]*/ null;
			var text = /*[[${text}]]*/ null;
			var page = /*[[${page.page}]]*/ ;
			var limit = 9;


			// 检查参数是否有效
			if (category_id1 === null) {
				category_id1 = 0; // 或者根据业务逻辑设置默认值
			}else {
				category_id1 = Number(category_id1);
			}
			if (category_id2 === null) {
				category_id2 = 0;
			}else {
				category_id2 = Number(category_id2);
			}
			if (text === null) {
				text = "";
			}





			$.ajax({
				url: 'product/getProductByCategoryAndName',
				data:{

					"category_id1":category_id1,
					"category_id2":category_id2,
					"text":text,
					"page":page,
					"limit":9,
				},
				success: function (result) {

					$("#search-input").val(text);
					console.log(result);
					let data=result.data;
					for(let i=0;i<data.length;i++){
						let itemdata=data[i];
						let itemtext=$("#productitem").html();
						let $item=$(itemtext);
						// 手动触发动画效果
						$item.addClass('fadeInUp ftco-animated');
						$item.find("[name='productName']").attr("href","shopping/product-single?id="+itemdata.id);
						$item.find(".img-prod").attr("href","shopping/product-single?id="+itemdata.id);
						$item.find(".buy-now").click(function(){


							$.ajax({
								url:"cart/add",
								data:{product_id:itemdata.id,
								},
								success:function(result){

									if(result.code==401){
										layer.msg(result.msg,{icon:2});
										setTimeout(function(){
											location.href="shopping/login";
										},2000)
									}else{
										layer.msg("已成功加入购物车",{icon:1,time:1800});
										window.location.href="shopping/cart";

									}
								},
								error:function(){

								}
							});

							showCartCount();
						});

						$item.find(".add-to-cart").click(function(){

							$.ajax({
								url:"cart/add",
								data:{product_id:itemdata.id,
								},
								success:function(result){
									console.log(typeof result);
									if(result.code==401){
										layer.msg(result.msg,{icon:2});
										setTimeout(function(){
											location.href="shopping/login";
										},2000)
									}else{
										layer.msg("已成功加入购物车",{icon:1,time:1800});
									}
								},
								error:function(){

								}
							});
						});


						// 找到 ismain 为 1 的图片的 imgurl
						let mainImageUrl = "";
						if (itemdata.imgurl && itemdata.imgurl.length > 0) {
							for (let j = 0; j < itemdata.imgurl.length; j++) {
								if (itemdata.imgurl[j].is_main === 1) {
									mainImageUrl = itemdata.imgurl[j].imgurl;
									break;
								}
							}
						}
						$item.find("img").attr("src",mainImageUrl);
						$item.find("[name='productName']").text(itemdata.name);
						$item.find(".price span").text(itemdata.price);
						$("#productNew").append($item);
					}

					// 渲染分页
					const totalPages = Math.ceil(result.count /limit);

					renderPagination(totalPages,page, category_id1, category_id2, text);
				}
			});
		</script>





		<script>

			function showCartCount() {
				$.ajax({
					url: 'cart/showCartCount',
					async: false,
					success: function (result) {

						console.log(result);

						let data = result.data;
						if (!data)
						{
							$("#headCartbutton1").text("CART["+0+"]");

						}else {
							$("#headCartbutton1").text("CART["+data+"]");
						}

					}
				});
			}  //这是顶部导航栏的购物车参数展示
			showCartCount();
		</script>





  </body>



</html>